<template>
    <div>
        <el-table
                :data="orderList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                style="width: 100%"
                :header-cell-style="{'text-align':'center'}"
                v-loading="isLoading">
            <el-table-column
                    prop="tbOrder.orderId"
                    label="订单号"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="商品"
                    align="center">
                <template  slot-scope="scope">
                    <router-link
                            :to="{ path: '/commodity/detial', query: {productID:scope.row.tbOrderItems[0].itemId}}">
                        <img style="width:100px;height:100px;border:none;" :src="scope.row.tbOrderItems[0].picPath">
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品信息"
                    align="center">
                <template  slot-scope="scope">
                    <router-link
                            :to="{ path: '/commodity/detial', query: {productID:scope.row.tbOrderItems[0].itemId}}">
                        <span>{{scope.row.tbOrderItems[0].title}}</span>
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="tbOrder.payment"
                    label="订单总额"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.tbOrder.createTime | formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="tbOrderShipping.receiverAddress"
                    label="收货地址"
                    align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="delOrder(scope.$index, scope.row)">删除订单
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3,10,20,30]"
                    :page-size="pagesize"
                    :total="orderList.length"
            ></el-pagination>
        </div>
        <!-- 分页END -->
    </div>
</template>

<script>
    import {mapActions} from "vuex";

    export default {
        name: 'MyOrder',
        data() {
            return {
                order: [],
                orderList: [],
                pagesize: 3,
                currentPage: 1,
                isLoading:true,//table加载数据时显示加载圆圈
            };
        },
        methods: {
            ...mapActions(["getUser"]),
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;//每页下拉显示数据
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;//点击第几页
            },
            getUserOrderList() {
                this.$axios
                    .get("/item/getorderlist", {
                        params: {
                            "userId": this.$store.getters.getUser.id
                        }
                    })
                    .then(res => {
                        for (let i = 0; i < res.data.result.length; i++) {
                            const item = res.data.result[i];
                            this.order.push(item);
                        }
                        for (let i = 0; i < this.order.length; i++) {
                            this.$axios
                                .get("/item/getorder", {
                                    params: {
                                        "orderId": this.order[i].orderId
                                    }
                                })
                                .then(res => {
                                    this.orderList.push(res.data.result);
                                    this.isLoading = false;
                                })
                                .catch(err => {
                                    return Promise.reject(err);
                                })
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
            },
            //删除订单
            delOrder(index, row) {
                this.$confirm('此操作将永久删除该订单, 是否继续?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios
                        .delete("item/deleteorder", {
                            params: {
                                "orderId": row.tbOrder.orderId
                            }
                        })
                        .then(res => {
                            if (res.data.result == 1) {
                                this.notifySucceed("删除订单成功");
                                this.order = [];
                                this.orderList = [];
                                this.getUserOrderList();
                            } else if (res.data.result == -1) {
                                this.notifyError("删除失败或订单已删除");
                            }
                        })
                }).catch((err) => {
                    return Promise.reject(err);
                });
            },
        },
        created() {
            this.getUserOrderList();
        },

    };
</script>

<style scoped>
    .pagination {
        height: 50px;
        text-align: center;
    }
</style>
